<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <link rel="stylesheet" href="../fa/css/all.css" />
    <link rel="stylesheet" href="./main.css" />
    <script src="./main.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        body {
            width: 100vw;
            height: 100vh;
            background: linear-gradient(#1d2b46,#4f4266);
        }

        .out {
            height: 200px;
            width: 800px;
            position: relative;
            margin: 0 auto;
            top: 100px;
        }
        .inner {
            width: 100%;
            height: 100%;
        }
        .img {
            width: 400px;
            height: 200px;
            position: absolute;
            transition: 0.3s;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .arrow {
            font-size: 34px;
        }
        .arrow i {
            position: absolute;
            color: #fff;
            z-index: 9999;
            cursor: pointer;
            top: 50%;
            transform: translateY(-50%);
        }
        .left {
            left: 0;
        }
        .right {
            right: 0;
        }
        .button {
            width: 175px;
            height: 15px;
            position: absolute;
            z-index: 9999;
            left: 50%;
            transform: translateX(-50%);
        }
        .button p {
            width: 15px;
            height: 15px;
            float: left;
            margin: 0 5px;
            cursor: pointer;
            background-color: silver;
        }

        .button p:first-child {
            background-color: rgb(20,134,187);
        }

        /* 设置id样式 */
        #last {
            transform: translateX(0);
            z-index: 9;
            opacity: 1;
        }
        #first {
            transform: translateX(200px) scale(1.3);
            z-index: 99;
            opacity: 1;
        }
        #second {
            transform: translateX(400px);
            z-index: 9;
            opacity: 1;
        }
        #left {
            transform: translateX(-100px);
            z-index: 1;
            opacity: 0;
        }
        #right {
            transform: translateX(500px);
            z-index: 1;
            opacity: 0;
        }

    </style>
</head>
<body>
<div class="out">
    <div class="inner">
        <div class="img">
            <img src="./imgs/1.png" alt="" />
        </div>
        <div class="img">
            <img src="./imgs/2.png" alt="" />
        </div>
        <div class="img">
            <img src="./imgs/3.png" alt="" />
        </div>
        <div class="img">
            <img src="./imgs/4.png" alt="" />
        </div>
        <div class="img">
            <img src="./imgs/5.png" alt="" />
        </div>
        <div class="img">
            <img src="./imgs/6.png" alt="" />
        </div>
        <div class="img">
            <img src="./imgs/7.png" alt="" />
        </div>
    </div>
    <div class="arrow">
        <i class="fas fa-chevron-left left"></i>
        <i class="fas fa-chevron-right right"></i>
    </div>
    <div class="button">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</div>
<script>
    window.onload = () => {
        var img = document.querySelectorAll('.out .inner .img');
        var left = document.querySelector('.arrow .left');
        var right = document.querySelector('.arrow .right');
        var button = document.querySelectorAll('.button p');
        var inner = document.querySelector('.inner');
        var index=0;
        var timer=null;

        // 设置一个数组用来储存id
        idArr = ['first','second','right','left','left','left','last']

        initialize();

        // 设置一个定时器，让图片轮播
        function start(){
            timer = setInterval(next, 3000);
        }
        // 创建切换图片的函数
        function prev(){
            clearInterval(timer);
            // 切换上一张也就是让数组的最后一个元素变成第一个元素
            idArr.push(idArr.shift());
            initialize();
            if(index<=0){
                index=img.length-1;
            }else{
                index--;
            }
            clearColor();
            start();
        }
        function next(){
            clearInterval(timer);
            // 切换上一张也就是让数组的最后一个元素变成第一个元素
            idArr.unshift(idArr.pop());
            initialize();
            if(index>=img.length-1){
                index=0;
            }else{
                index++;
            }
            clearColor();
            start();
        }

        left.addEventListener('click',prev)
        right.addEventListener('click',next)
        inner.addEventListener('mouseover',() => {clearInterval(timer);})
        inner.addEventListener('mouseout',start)

        //给小方块添加点击事件
        for(let i=0;i<button.length;i++){
            button[i].addEventListener('click',() => {
                //在用户点击的时候关闭定时器
                timer = clearInterval(timer);
                //这里需要判断用户点击的小方块与当前图片的索引之差，如果
                //大于0，则表明用户需要更换的是后面的图片，反之，表明用户
                //需要更换之前也就是前面的图片
                if(i > index){
                    let len = i-index;
                    while(len--){
                        next();
                    }
                }else if(i < index){
                    let len = index-i;
                    while(len--){
                        prev();
                    }
                }
            })
        }

        //创建一个函数用来让小方块跟随图片运动
        function clearColor() {
            for (let i = 0; i < button.length; i++) {
                button[i].style.background = "silver";
            }
            //让当前的索引变色
            button[index].style.background = "rgb(20, 134, 187)";
        }
        // 创建一个函数用来初始化图片
        function initialize(){
            for(let i=0;i<img.length;i++){
                img[i].id = idArr[i];
            }
        }
        start(); // 开启定时器
    }
</script>
</body>
</html>